<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>虚拟银行系统 - 个人信息</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  <link rel="stylesheet" href="/css/main.css">
  <style>
    /* Profile page specific styles */
    .profile-container {
      max-width: 1000px;
      margin: 0 auto;
    }
    
    .profile-tabs {
      display: flex;
      border-bottom: 1px solid var(--divider-color);
      margin-bottom: var(--spacing-lg);
    }
    
    .profile-tab {
      padding: var(--spacing-sm) var(--spacing-lg);
      margin-right: var(--spacing-md);
      cursor: pointer;
      position: relative;
      font-weight: 500;
    }
    
    .profile-tab.active {
      color: var(--primary-color);
    }
    
    .profile-tab.active::after {
      content: '';
      position: absolute;
      bottom: -1px;
      left: 0;
      width: 100%;
      height: 2px;
      background-color: var(--primary-color);
    }
    
    .profile-sections > div {
      display: none;
    }
    
    .profile-sections > div.active {
      display: block;
    }
    
    .profile-header {
      display: flex;
      margin-bottom: var(--spacing-lg);
    }
    
    .profile-avatar {
      width: 120px;
      height: 120px;
      border-radius: 60px;
      overflow: hidden;
      margin-right: var(--spacing-lg);
      flex-shrink: 0;
      background-color: var(--light-bg);
      border: 1px solid var(--divider-color);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }
    
    .profile-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .profile-avatar-placeholder {
      font-size: 48px;
      color: var(--light-text);
    }
    
    .profile-avatar-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 14px;
      opacity: 0;
      transition: opacity 0.3s;
      cursor: pointer;
    }
    
    .profile-avatar:hover .profile-avatar-overlay {
      opacity: 1;
    }
    
    .profile-info {
      flex: 1;
    }
    
    .profile-name {
      font-size: 24px;
      font-weight: 500;
      margin-bottom: var(--spacing-xs);
    }
    
    .profile-meta {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: var(--spacing-md);
    }
    
    .profile-meta-item {
      margin-right: var(--spacing-lg);
      margin-bottom: var(--spacing-xs);
      display: flex;
      align-items: center;
      color: var(--light-text);
    }
    
    .profile-meta-item i {
      margin-right: var(--spacing-xs);
      width: 16px;
      text-align: center;
    }
    
    .profile-status {
      display: inline-block;
      padding: 4px 12px;
      border-radius: 16px;
      background-color: rgba(82, 196, 26, 0.1);
      color: var(--success-color);
      font-size: 13px;
    }
    
    .profile-actions {
      margin-top: var(--spacing-md);
    }
    
    .profile-form-section {
      margin-bottom: var(--spacing-lg);
    }
    
    .profile-form-title {
      font-weight: 500;
      margin-bottom: var(--spacing-md);
      padding-bottom: var(--spacing-sm);
      border-bottom: 1px solid var(--divider-color);
    }
    
    .profile-form-row {
      display: flex;
      margin-bottom: var(--spacing-md);
    }
    
    .profile-form-col {
      flex: 1;
      margin-right: var(--spacing-lg);
    }
    
    .profile-form-col:last-child {
      margin-right: 0;
    }
    
    .security-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--spacing-md) 0;
      border-bottom: 1px solid var(--divider-color);
    }
    
    .security-item:last-child {
      border-bottom: none;
    }
    
    .security-info {
      flex: 1;
    }
    
    .security-title {
      font-weight: 500;
      margin-bottom: 4px;
    }
    
    .security-desc {
      font-size: 13px;
      color: var(--light-text);
    }
    
    .security-status {
      margin: 0 var(--spacing-md);
      font-size: 13px;
    }
    
    .security-status.success {
      color: var(--success-color);
    }
    
    .security-status.warning {
      color: var(--warning-color);
    }
    
    .security-status.danger {
      color: var(--error-color);
    }
    
    .activity-list {
      margin-top: var(--spacing-md);
    }
    
    .activity-item {
      display: flex;
      align-items: flex-start;
      padding: var(--spacing-md) 0;
      border-bottom: 1px solid var(--divider-color);
    }
    
    .activity-item:last-child {
      border-bottom: none;
    }
    
    .activity-icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: var(--spacing-md);
      flex-shrink: 0;
    }
    
    .activity-icon.login {
      background-color: rgba(26, 58, 143, 0.1);
      color: var(--primary-color);
    }
    
    .activity-icon.update {
      background-color: rgba(82, 196, 26, 0.1);
      color: var(--success-color);
    }
    
    .activity-icon.security {
      background-color: rgba(255, 153, 0, 0.1);
      color: var(--accent-color);
    }
    
    .activity-content {
      flex: 1;
    }
    
    .activity-title {
      margin-bottom: 2px;
    }
    
    .activity-meta {
      display: flex;
      font-size: 13px;
      color: var(--light-text);
    }
    
    .activity-time {
      margin-right: var(--spacing-md);
    }
    
    .activity-location {
      display: flex;
      align-items: center;
    }
    
    .activity-location i {
      margin-right: 4px;
      font-size: 12px;
    }
    
    .id-card-masked, .phone-masked, .email-masked {
      font-family: monospace;
    }
    
    .avatar-file-input {
      display: none;
    }
    
    @media (max-width: 768px) {
      .profile-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
      }
      
      .profile-avatar {
        margin-right: 0;
        margin-bottom: var(--spacing-md);
      }
      
      .profile-meta {
        justify-content: center;
      }
      
      .profile-form-row {
        flex-direction: column;
      }
      
      .profile-form-col {
        margin-right: 0;
        margin-bottom: var(--spacing-md);
      }
    }
  </style>
</head>
<body>
  <div class="app-wrapper">
    <!-- Top Navigation Bar -->
    <div id="top-navbar"></div>
    
    <div class="main-container">
      <!-- Sidebar -->
      <div id="sidebar"></div>
      
      <!-- Main Content -->
      <div class="content">
        <div class="page-header">
          <div class="page-title">个人信息</div>
          <div class="breadcrumb">
            <a href="/index.html">首页</a>
            <i class="fas fa-angle-right"></i>
            <span>个人信息</span>
          </div>
        </div>
        
        <div class="profile-container">
          <!-- Profile Header -->
          <div class="profile-header">
            <div class="profile-avatar">
              <div id="avatar-container">
                <div class="profile-avatar-placeholder">
                  <i class="fas fa-user"></i>
                </div>
              </div>
              <div class="profile-avatar-overlay" id="change-avatar-btn">
                <i class="fas fa-camera"></i> 更换头像
              </div>
              <input type="file" id="avatar-input" class="avatar-file-input" accept="image/*">
            </div>
            <div class="profile-info">
              <div class="profile-name" id="user-name">加载中...</div>
              <div class="profile-meta">
                <div class="profile-meta-item">
                  <i class="fas fa-mobile-alt"></i>
                  <span id="user-phone">加载中...</span>
                </div>
                <div class="profile-meta-item">
                  <i class="fas fa-envelope"></i>
                  <span id="user-email">加载中...</span>
                </div>
                <div class="profile-meta-item">
                  <i class="fas fa-clock"></i>
                  <span id="user-create-time">加载中...</span>
                </div>
              </div>
              <div class="profile-status" id="user-status">正常</div>
              <div class="profile-actions">
                <button class="btn btn-outline btn-sm" id="logout-btn">
                  <i class="fas fa-sign-out-alt"></i> 退出登录
                </button>
              </div>
            </div>
          </div>
          
          <!-- Profile Tabs -->
          <div class="profile-tabs">
            <div class="profile-tab active" data-tab="basic-info">基本信息</div>
            <div class="profile-tab" data-tab="security">安全设置</div>
            <div class="profile-tab" data-tab="activity">登录历史</div>
          </div>
          
          <!-- Profile Sections -->
          <div class="profile-sections">
            <!-- Basic Info Section -->
            <div class="profile-section active" id="basic-info-section">
              <div class="card">
                <div class="card-body">
                  <form id="basic-info-form">
                    <div class="profile-form-section">
                      <div class="profile-form-title">账户信息</div>
                      <div class="profile-form-row">
                        <div class="profile-form-col">
                          <div class="form-group">
                            <label for="username">用户名</label>
                            <div class="input-wrapper">
                              <input type="text" id="username" class="form-control" readonly>
                              <div class="input-icon">
                                <i class="fas fa-user"></i>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="profile-form-col">
                          <div class="form-group">
                            <label for="phone">手机号</label>
                            <div class="input-wrapper">
                              <input type="text" id="phone" class="form-control" readonly>
                              <div class="input-icon">
                                <i class="fas fa-mobile-alt"></i>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    
                    <div class="profile-form-section">
                      <div class="profile-form-title">个人信息</div>
                      <div class="profile-form-row">
                        <div class="profile-form-col">
                          <div class="form-group">
                            <label for="real-name">真实姓名</label>
                            <div class="input-wrapper">
                              <input type="text" id="real-name" class="form-control" placeholder="请输入真实姓名">
                              <div class="input-icon">
                                <i class="fas fa-id-card"></i>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="profile-form-col">
                          <div class="form-group">
                            <label for="id-card">身份证号</label>
                            <div class="input-wrapper">
                              <input type="text" id="id-card" class="form-control" placeholder="请输入身份证号">
                              <div class="input-icon">
                                <i class="fas fa-id-card"></i>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="profile-form-row">
                        <div class="profile-form-col">
                          <div class="form-group">
                            <label for="email">邮箱</label>
                            <div class="input-wrapper">
                              <input type="email" id="email" class="form-control" placeholder="请输入邮箱">
                              <div class="input-icon">
                                <i class="fas fa-envelope"></i>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="profile-form-col">
                          <!-- Empty column for layout balance -->
                        </div>
                      </div>
                    </div>
                    
                    <div class="form-actions">
                      <button type="submit" class="btn btn-primary">保存更改</button>
                    </div>
                  </form>
                </div>
              </div>
            </div>
            
            <!-- Security Section -->
            <div class="profile-section" id="security-section">
              <div class="card">
                <div class="card-body">
                  <div class="security-item">
                    <div class="security-info">
                      <div class="security-title">登录密码</div>
                      <div class="security-desc">用于登录账户，建议定期更换</div>
                    </div>
                    <div class="security-status success">已设置</div>
                    <button class="btn btn-outline btn-sm" id="change-password-btn">修改</button>
                  </div>
                  
                  <div class="security-item">
                    <div class="security-info">
                      <div class="security-title">交易密码</div>
                      <div class="security-desc">用于转账、提现等操作，需与登录密码不同</div>
                    </div>
                    <div class="security-status warning" id="payment-password-status">未设置</div>
                    <button class="btn btn-outline btn-sm" id="set-payment-password-btn">设置</button>
                  </div>
                  
                  <div class="security-item">
                    <div class="security-info">
                      <div class="security-title">手机绑定</div>
                      <div class="security-desc">用于接收验证码和交易通知</div>
                    </div>
                    <div class="security-status success">已绑定</div>
                    <button class="btn btn-outline btn-sm" id="change-phone-btn">更换</button>
                  </div>
                  
                  <div class="security-item">
                    <div class="security-info">
                      <div class="security-title">邮箱绑定</div>
                      <div class="security-desc">用于接收账户通知和找回密码</div>
                    </div>
                    <div class="security-status" id="email-bind-status">未绑定</div>
                    <button class="btn btn-outline btn-sm" id="bind-email-btn">绑定</button>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- Activity Section -->
            <div class="profile-section" id="activity-section">
              <div class="card">
                <div class="card-header">
                  <h3 class="card-title">登录历史</h3>
                </div>
                <div class="card-body">
                  <div id="activity-list" class="activity-list">
                    <div class="loader-container">
                      <div class="loader"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Change Password Modal -->
  <div class="modal" id="change-password-modal">
    <div class="modal-content">
      <div class="modal-header">
        <h3>修改密码</h3>
        <span class="modal-close">&times;</span>
      </div>
      <div class="modal-body">
        <form id="change-password-form">
          <div class="form-group">
            <label for="old-password">原密码</label>
            <div class="input-wrapper">
              <input type="password" id="old-password" class="form-control" placeholder="请输入原密码" required>
              <div class="input-icon">
                <i class="fas fa-lock"></i>
              </div>
            </div>
          </div>
          
          <div class="form-group">
            <label for="new-password">新密码</label>
            <div class="input-wrapper">
              <input type="password" id="new-password" class="form-control" placeholder="请输入新密码" required>
              <div class="input-icon">
                <i class="fas fa-lock"></i>
              </div>
            </div>
            <div class="form-hint">密码长度8-20位，包含字母和数字</div>
          </div>
          
          <div class="form-group">
            <label for="confirm-password">确认密码</label>
            <div class="input-wrapper">
              <input type="password" id="confirm-password" class="form-control" placeholder="请再次输入新密码" required>
              <div class="input-icon">
                <i class="fas fa-lock"></i>
              </div>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button class="btn btn-outline" id="cancel-password-btn">取消</button>
        <button class="btn btn-primary" id="save-password-btn">保存</button>
      </div>
    </div>
  </div>
  
  <!-- Set Payment Password Modal -->
  <div class="modal" id="payment-password-modal">
    <div class="modal-content">
      <div class="modal-header">
        <h3 id="payment-password-title">设置交易密码</h3>
        <span class="modal-close">&times;</span>
      </div>
      <div class="modal-body">
        <form id="payment-password-form">
          <div class="form-group" id="old-payment-password-group" style="display: none;">
            <label for="old-payment-password">原交易密码</label>
            <div class="input-wrapper">
              <input type="password" id="old-payment-password" class="form-control" placeholder="请输入原交易密码">
              <div class="input-icon">
                <i class="fas fa-lock"></i>
              </div>
            </div>
          </div>
          
          <div class="form-group">
            <label for="new-payment-password">交易密码</label>
            <div class="input-wrapper">
              <input type="password" id="new-payment-password" class="form-control" placeholder="请输入交易密码" required>
              <div class="input-icon">
                <i class="fas fa-lock"></i>
              </div>
            </div>
            <div class="form-hint">密码长度6位数字</div>
          </div>
          
          <div class="form-group">
            <label for="confirm-payment-password">确认交易密码</label>
            <div class="input-wrapper">
              <input type="password" id="confirm-payment-password" class="form-control" placeholder="请再次输入交易密码" required>
              <div class="input-icon">
                <i class="fas fa-lock"></i>
              </div>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button class="btn btn-outline" id="cancel-payment-password-btn">取消</button>
        <button class="btn btn-primary" id="save-payment-password-btn">保存</button>
      </div>
    </div>
  </div>

  <!-- Scripts -->
  <script src="/js/utils/Utils.js"></script>
  <script src="/js/components/Toast.js"></script>
  <script src="/js/services/ApiService.js"></script>
  <script src="/js/components/TopNavBar.js"></script>
  <script src="/js/components/SideBar.js"></script>
  <script src="/js/pages/profile.js"></script>
</body>
</html>
